<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>
		History.js
	</title>
</head>
<body style="padding-bottom:40px">
	<!-- Scripts -->
	<script>if ( typeof window.JSON === 'undefined' ) { document.write('<script src="../scripts/uncompressed/json2.js"><\/script>'); }</script>
	<script src="../vendor/jquery.js"></script>
	<script src="../scripts/bundled/html4+html5/jquery.history.js"></script>

	<!-- HTML -->
	<div id="wrap">
		<!-- Intro -->
		<h1>History.js</h1>
		<p>History.js gracefully supports unicode.</p>

		<!-- Textarea for Logging -->
		<textarea id="log" style="width:100%;height:400px"></textarea>

		<!-- Buttons -->
		<ul id="buttons">
		</ul>

		<!-- Our Script -->
		<script>
			(function(window,undefined){

				// Check Location
				if ( document.location.protocol === 'file:' ) {
					alert('The HTML5 History API (and thus History.js) do not work on files, please upload it to a server.');
				}

				// Establish Variables
				var
					State = History.getState(),
					$log = $('#log');

				// Log Initial State
				History.log('initial:', State.data, State.title, State.url);

				// Bind to State Change
				History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
					// Log the State
					var State = History.getState(); // Note: We are using History.getState() instead of event.state
					History.log('statechange:', State.data, State.title, State.url);
				});

				// Prepare Buttons
				var
					buttons = document.getElementById('buttons'),
					scripts = [
						'History.pushState({state:1,rand:Math.random()}, "State 1", "?läu=ßüs"); // logs {state:1,rand:"some random value"}, "State 1", "?l#äu=ßüs"',
						'History.pushState({state:2,rand:Math.random()}, "State 2", "?chinese=リオれ"); // logs {state:2,rand:"some random value"}, "State 2", "/chinese/2"',
						'History.back(); // logs {state:3}, "State 3", "?state=3"',
						'History.back(); // logs {state:1}, "State 1", "?state=1"',
						'History.back(); // logs {}, "The page you started at", "?"',
						'History.go(2); // logs {state:3}, "State 3", "?state=3"'
					],
					buttonsHTML = ''
					;

				// Add Buttons
				for ( var i=0,n=scripts.length; i<n; ++i ) {
					var _script = scripts[i];
					buttonsHTML +=
						'<li><button onclick=\'javascript:'+_script+'\'>'+_script+'</button></li>';
				}
				buttons.innerHTML = buttonsHTML;

			})(window);
		</script>
	</div>
</body>
</html>
